<template>
  <fieldset>
    <legend>产品product</legend>
    <h1>产品</h1>
    <ul>
      <li v-for="item in products" :key="item.id">
        <b>产品名称：{{ item.title }}</b>
        ---------
        <b>产品价格：{{ item.price }}</b>
        ---------
        <b>库存：{{ item.inventory }}</b>
        &nbsp;
        <button @click="add(item)" :disabled="item.inventory === 0">
          加入购物车
        </button>
      </li>
    </ul>
  </fieldset>
</template>
<script>
import { mapMutations, mapActions, mapState } from "vuex";
export default {
  mounted() {
    //请求数据
    this.FETCH_PRODUCT();
  },
  computed: {
    ...mapState("product", ["products"]),
  },
  methods: {
    ...mapMutations("product", ["SET_PRODUCT", "DECREASE_PRO"]),
    ...mapActions("product", ["FETCH_PRODUCT"]),
    ...mapMutations("cart", ["SET_CARTS"]),

    add(item) {
      this.SET_CARTS(item);
      this.DECREASE_PRO(item);
    },
  },
};
</script>
